<script setup lang='ts' name="label-management">
import type { IRowV0 } from '@/pages/house-district/types'
import type { FormInstance, FormRules, UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import type { VxeGridInstance, VxeGridListeners } from 'vxe-table'

import { useLabelTable } from '@/pages/label-management/hooks/label-table'
import { useTable } from '@/pages/label-management/hooks/use-table'
import {
    addTag,
    autoAddInfo,
    deleteTag,
    editTag,
    exportLabel,
    getAreasList,
    getHouseList,
    getHouseTagList,
    getListProjectTag,
    getListTag,
    getTagDetail,
    queryOtherTags,
    updateProjectTag,
    uploadExcel,
} from '@fl/api/xf-api/label-manage'
import ButtonItem from '@fl/components/button-item.vue'
import FlUpload from '@fl/components/fl-upload.vue'
import { ElLoading } from 'element-plus'
// import UpdatedOss from '@fl/components/upLoad-oss.vue'
import { ElMessage } from 'element-plus'
import { cloneDeep } from 'lodash-es'
import { onMounted, reactive, ref } from 'vue'

import { getExcelUrl } from '../../../../../packages/api/xf-api/label-manage'
import { option } from '../../../../../packages/city-service/clue/types'
import router from '../../router'
import AddTagProject from './component/add/index.vue'

const upload = ref<UploadInstance>()
const handleExceed: UploadProps['onExceed'] = (files) => {
    upload.value!.clearFiles()
    const file = files[0] as UploadRawFile
    upload.value!.handleStart(file)
}

function submitUpload() {
    upload.value!.submit()
}

function switchState() {
    doSearch()
}

function switchTagType(type) {
    if (type === 1) {
        ruleTagForm.titleImages = ''
    }
}

function uploadThemeSuccess(data) {
    if (data.url) {
        ruleTagForm.titleImages = data.url
        uploadFileStatus.value = false
        setTimeout(() => {
            loadingInstance.value.close()
            ElMessage.success('图片上传成功')
        }, 1000)
    }
}

function uploadFileSuccess(data) {
    if (data.url) {
        ruleTagForm.tagImgPath = data.url
        uploadFileStatus.value = false
        setTimeout(() => {
            loadingInstance.value.close()
            ElMessage.success('图片上传成功')
        }, 1000)
    }
}

const loading = ref(false)
function handleHttpRequest(params) {
    const file = params.file
    const fileType = file.type
    const isExcel = fileType.includes('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') || fileType.includes('application/vnd.ms-excel')
    const isLt2M = file.size / 1024 / 1024 < 100
    // 这里常规检验，看项目需求而定
    if (!isExcel) {
        ElMessage.error('只能上传.xls,.xlsx格式的Excel文件!')
        return
    }
    if (!isLt2M) {
        ElMessage.error('只能上传小于100M的文件')
        return
    }
    // 根据后台需求数据格式
    const formData = new FormData()
    // 文件对象
    formData.append('file', file)
    console.log(`---${formData}`)
    // submitUpload(formData)
    uploadExcel(formData).then((res) => {
        console.log(res)
        if (res.code === 200) {
            excelDialogVisible.value = false
            ElMessage.success(res.msg)
            doSearch()
        }
        else {
            ElMessage.error(res.msg)
        }
    })
}

const { addBtn, btns, gridOptions } = useTable()
const { labelBtns, labelGridOptions } = useLabelTable()
const xGrid = ref<VxeGridInstance<IRowV0>>()
const xGrid2 = ref<VxeGridInstance<IRowV0>>()
const showAdd = ref(false)
const showId = ref('')

const excelModelUrl = ref('')
function getExcelModel() {
    getExcelUrl().then((res) => {
        if (res.code === 200) {
            excelModelUrl.value = res.data
        }
    })
}

function downloadExcel(name: string) {
    const fileLink = document.createElement('a')
    fileLink.href = excelModelUrl.value
    fileLink.name = name
    fileLink.setAttribute('download', name)
    document.body.appendChild(fileLink)
    fileLink.click()
}

const activeTab = ref<string>('0')
function handleTabClick({ index }) {
    activeTab.value = index
    if (activeTab.value === '0') {
        getTags()
        doSearch()
    }
    else {
        doSearch()
    }
}

const projectFormRef = ref(null)
type projectTag = {
    openTime?: string
    openTimeType?: number | string
    soonTag?: boolean

}
const projectTagForm = ref<projectTag>({
    openTime: '',
    openTimeType: '',
    soonTag: false,
})

const projectTagForm2 = ref<projectTag>({
    openTime: '',
    openTimeType: '',
    soonTag: false,
})

function projectChange(val) {
    const projectItem = projectList.value.find((item) => {
        return item.value === val.value
    })
    if (projectItem) {
        form.projectName = projectItem.value
    }
    else {
        form.projectName = ''
    }
}

const formateType = ref<string>('YYYY-MM')
const dateType = ref<string>('month')
function openTimeTypeChange(type) {
    if (type === 1) {
        dateType.value = 'month'
        formateType.value = 'YYYY-MM'
    }
    else if (type === 2) {
        dateType.value = 'date'
        formateType.value = 'YYYY-MM-DD'
    }
    projectTagForm.value.openTime = ''
}

function resetRuleTagForm() {
    ruleFormRef.value?.resetFields()
    ruleTagForm.id = ''
    ruleTagForm.remark = ''
    ruleTagForm.tagId = ''
    ruleTagForm.tagType = ''
    ruleTagForm.tagName = ''
    ruleTagForm.tagImgPath = ''
    ruleTagForm.policyArea = ''
    ruleTagForm.policyAreaCode = ''
    ruleTagForm.policyValue = ''
    ruleTagForm.policyConfig = [{ policyArea: '', policyValue: '' }]
}

function closeDialog() {
    resetRuleTagForm()
    ruleFormRef.value?.resetFields()
}

function groupByProp(arr, prop) {
    const grouped = new Map()
    arr.forEach((item) => {
        const key = item[prop]
        const group = grouped.get(key) || []
        group.push(item)
        grouped.set(key, group)
    })
    return Object.fromEntries(grouped)
}

const choseTagDialogVisible = ref(false)
const otherTagTypeOptions = ref([])
const otherTagTypeData = ref([])

const tagProjectTitle = ref('')
function getOtherTags() {
    queryOtherTags().then((res) => {
        if (res.code === 200) {
            const result = res.data
            otherTagTypeData.value = res.data
            checkedOtherIds.value.forEach((element) => {
                otherTagTypeData.value.forEach((it) => {
                    if (it.id === element) {
                        checkedOtherTags.value.push(it)
                    }
                })
            })
            otherTagTypeOptions.value = groupByProp(result, 'subCat')
            choseTagDialogVisible.value = true
            console.log(checkedOtherTags)
        }
        else {
            ElMessage.success(res.msg)
        }
    })
}

function addTagsProject() {
    console.log(checkedOtherTags)
    checkedOtherTags.value.forEach((item) => {
        // tagTypeList.value
        tagTypeList.value[3].tagName.push({ tagId: item.id, tagName: item.name, tagType: 3 })
    })
    choseTagDialogVisible.value = false
    dialogTagVisible.value = true
}

function changeArea(val) {
    if (val) {
        const areaItem = districtTypes.value.find((item) => {
            return item.id === val
        })
        ruleTagForm?.policyConfig?.map((it) => {
            if (it.policyAreaCode === areaItem.id) {
                it.policyArea = areaItem.name
            }
        })
    }
}

const projectId = ref<string>('')
const projectName = ref<string>('')
const isVewProjectTag = ref<boolean>(false)

async function saveProject() {
    const targetTags = checkedTags.value
    const tagMap = new Map()
    targetTags.forEach((item) => {
        if (tagMap.has(item.tagType)) {
            const currentTag = tagMap.get(item.tagType)
            currentTag.tagsId.push(item.tagId)
            currentTag.tagsName.push(item.tagName)
        }
        else {
            tagMap.set(item.tagType, { tagType: item.tagType, tagsId: [item.tagId], tagsName: [item.tagName] })
        }
    })

    const tags = []
    tagMap.forEach((item) => {
        item.tagsId = item.tagsId.toString()
        item.tagsName = item.tagsName.toString()
        if (item.tagType !== 4) {
            tags.push(item)
        }
    })
    let soonTag = {
        tagType: '',
        tagsId: '',
        tagsName: '',
    }
    if (tagSoonList.value.length > 0) {
        if (projectTagForm.value.soonTag) {
            soonTag = {
                openTimeType: projectTagForm.value.openTimeType,
                tagType: tagSoonList.value[0].tagType,
                tagsId: tagSoonList.value[0].tagName[0].tagId,
                tagsName: tagSoonList.value[0].tagName[0].tagName,
            }
        }
    }

    if (!projectTagForm2.value.soonTag && projectTagForm.value.soonTag) {
        let openTimeStr = ''
        if (projectTagForm.value.openTimeType && projectTagForm.value.openTime) {
            openTimeStr = `,开盘时间:${projectTagForm.value.openTime}`
        }
        const params = {
            content: `${projectName.value}即将开盘${openTimeStr},散请期待。我们期待您的关注,并承诺您将第一时间获得关于楼盘的最新资讯。我们期待您的关注,您将第一时间获得关于楼盘的最新资讯。`,
            images: '[]',
            projectId: projectId.value,
            relevanceTagName: '即将开盘',
            title: `${projectName.value}即将开盘`,
        }
        autoAddInfo(params).then(() => {

        })
    }

    const params = {
        openTime: projectTagForm.value.openTimeType ? projectTagForm.value.openTime : undefined,
        openTimeType: projectTagForm.value.openTimeType ? projectTagForm.value.openTimeType : undefined,
        projectId: projectId.value,
        tags: projectTagForm.value.soonTag ? tags.concat(soonTag) : tags, // [{"tagType": 0, "tagsId": "1", "tagsName": "好房"}]
    }
    const result = await updateProjectTag(params)
    if (result.code === 200) {
        dialogTagVisible.value = false
        doSearch()
        ElMessage.success('操作成功')
    }
    else {
        ElMessage.success(result.msg)
    }
}

// 关于标签维护关联楼盘数据定义标签名称
const tagProjectForm = ref({
    area1: '',
    area2: '',
})
const choseProjectList = ref<projectItemObject[]>([])
const choseTag = ref({
    tagId: '',
    tagName: '',
    tagType: '',
})

// 切换楼盘
const dialogVisible = ref(false)
const dialogTagVisible = ref(false)
const dialogProjectVisible = ref(false)

function closeProjectTagDialog() {
    rightValue.value = []
    leftCheckedValue.value = []
    rightCheckedValue.value = []
    choseProjectList.value = []
    tagProjectForm.value.area1 = ''
    tagProjectForm.value.area2 = ''
    dialogProjectVisible.value = false
    getData()
}

function closeTagDialog() {
    checkedTags.value = []
    checkedOtherIds.value = []
    projectTagForm.value.soonTag = false
    projectTagForm.value.openTime = ''
    projectTagForm.value.openTimeType = ''
    tagTypeList.value = cloneDeep(initTagTypeList.value)
    dialogTagVisible.value = false
}

function closeChoseTagDialog() {
    choseTagDialogVisible.value = false
    checkedOtherTags.value = []
}

const gridEvents: VxeGridListeners<IRowV0> = {
    pageChange({ currentPage, pageSize }) {
        if (gridOptions.pagerConfig) {
            gridOptions.pagerConfig.currentPage = currentPage
            gridOptions.pagerConfig.pageSize = pageSize
        }
        getData()
    },
}

const gridLabelEvents: VxeGridListeners<IRowV0> = {
    pageChange({ currentPage, pageSize }) {
        if (labelGridOptions.pagerConfig) {
            labelGridOptions.pagerConfig.currentPage = currentPage
            labelGridOptions.pagerConfig.pageSize = pageSize
        }
        getData()
    },
}

type queryForm = {
    projectName?: string
    state?: number | string
    tagId?: number | string
    tagName?: any[]
    tagType?: number | string
}

const form = reactive<queryForm>({
    projectName: '',
    state: 'all',
    tagId: 'all',
    tagName: [],
    tagType: 'all',
})

function resetForm() {
    form.projectName = ''
    form.state = 'all'
    form.tagType = 'all'
    form.tagId = 'all'
    tagsOptionsTwo.value = [{ label: '全部', value: 'all' }]
    doSearch()
}

// 标签类型,业务标签0,主题标签1,优惠标签2,楼盘标签3,即将开盘标签(是/否)4,其他标签5
const categoryData = reactive({
    0: '业务标签',
    1: '楼盘主题',
    2: '优惠标签',
    3: '楼盘基础标签',
    4: '即将开盘',
    5: '其他',
    6: '政策标签',
})

const uploadFileDialog = ref(null)

function servicesLoading(node, str, lock, bg) {
    return ElLoading.service({
 	background: bg, // 背景色与透明度
        lock, // 同v-loading的修饰符
        // loading需要覆盖的DOM节点，默认为body
        target: document.querySelector(node),
        text: str, // 加载文案
    // spinner: 'el-icon-loading',	 //加载图标
    })
}

const uploadFileStatus = ref(false)
const loadingInstance = ref(null)
function uploadFileStart() {
    uploadFileStatus.value = true
    loadingInstance.value = servicesLoading('.el-dialog.upload-file-dialog', '正在上传中,请耐心等待', true, 'rgba(0,0,0,0.3)')
}

/* type Option = {
    disabled: boolean
    key: number
    label: string
} */

const allProjectData = ref([])
const rightValue = ref([])
const leftCheckedValue = ref([])
const rightCheckedValue = ref([])

function handleProjectChange(value: number | string, direction: 'left' | 'right', movedKeys: number[] | string[]) {
    console.log(value, direction, movedKeys)
    if (direction === 'right') {
        console.log(rightValue, allProjectData)
    }
}

type projectItemObject = {
    projectId: number | string
    projectName: string
}

function handleProjectRightChange(checkedKeys) {
    if (checkedKeys.length > 0) {
        const choseProjects: projectItemObject[] = []
        checkedKeys.forEach((item) => {
            allProjectData.value.forEach((it) => {
                if (it.key === item) {
                    choseProjects.push({ projectId: it.key, projectName: it.label })
                }
            })
        })
        choseProjectList.value = choseProjects
    }
    else {
        choseProjectList.value = []
    }
}

const checkedTags = ref<string[]>([])
const checkedIdTags = ref([])
function handleCheckedTagsChange(val, tagType) {
    checkedIdTags.value = val
    const temArray = []
    initAllTags.value.forEach((item, index) => {
        if (val.length > 0) {
            checkedIdTags.value.forEach((it) => {
                if (item?.tagId === it) {
                    temArray.push(item)
                }
            })
        }
    })
    checkedTags.value = temArray
}

const checkedOtherTags = ref([])
const checkedIdOtherTags = ref([])
function handleOtherTagsChange(val, tagType) {
    console.log(checkedOtherTags)
}

const ruleFormRef = ref<FormInstance>()
// 单个政策实体
type policyItem = {
    policyArea: string
    policyAreaCode: string
    policyValue: string
}

// 标签集合单个实体
/**
     type tagItem = {
    tagsId: string
    tagsName: string
    tagsType: number | string
}

type projectForm = {
    createDate?: string
    id?: number | string
    isSystem?: number// 0平台标签 1.商家标签
    policyConfig?: policyItem []// 区域政策
    sort: number
    state?: number
    tagImgPath: string
    tagName: string
    tagType: number | string
}
*/

type tagForm = {
    id?: string
    isSystem?: number // 0平台标签 1.商家标签
    openTime?: string
    policyArea?: string
    policyAreaCode?: string
    policyConfig?: policyItem []
    policyValue?: string
    remark?: string
    soonTag?: boolean
    sort?: number
    tagId?: number | string
    tagImgPath: string
    tagName: string
    tagType: number | string
    titleImages: string
}

const excelDialogVisible = ref(false)
function importExcel() {
    excelDialogVisible.value = true
}

async function exportLabelInfo() {
    let tagType = ''
    if (form.tagType !== '') {
        if (form.tagType === 'all') { tagType = '' }
        else { tagType = form.tagType }
    }

    let tagId = ''
    if (form.tagId !== '') {
        if (form.tagId === 'all') { tagId = '' }
        else { tagId = form.tagId }
    }

    let tagState = ''
    if (form.state !== '') {
        if (form.state === 'all') { tagState = '' }
        else { tagState = form.state }
    }
    if (tagType === '' || tagType === undefined) {
        ElMessage.warning('请选择标签分类')
        return false
    }
    const params = {
        pageNum: 1,
        pageSize: 2000,
        projectName: form.projectName ? form.projectName : undefined,
        state: tagState === '' ? undefined : tagState,
        tagId: tagId === '' ? undefined : tagId,
        tagType: tagType === '' ? undefined : tagType,
        viewType: 1,
    }
    const result = await exportLabel(params)
    const blob = new Blob([result], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
    const objectUrl = URL.createObjectURL(blob)
    location.href = objectUrl
    URL.revokeObjectURL(objectUrl)
}

function closeExcelDialog() {
    upload.value?.clearFiles()
    excelDialogVisible.value = false
}
const isViewFlag = ref<boolean>(false)
const tagDialogTitle = ref<string>('')
let ruleTagForm = reactive<tagForm>({
    id: '',
    policyArea: '',
    policyAreaCode: '',
    policyConfig: [{ policyArea: '', policyValue: '' }],
    policyValue: '',
    tagId: '',
    tagImgPath: '',
    tagName: '',
    tagType: '',
    titleImages: '',
})

function addPolicyItem() {
    const item = { policyArea: '', policyValue: '' }
    ruleTagForm?.policyConfig?.push(item)
}

function removePolicyItem(index) {
    if (ruleTagForm?.policyConfig?.length > 1) {
        ruleTagForm?.policyConfig?.splice(index, 1)
    }
    else {
        ElMessage.warning('选择政策标签时,至少保留一项')
    }
}

const rules = reactive<FormRules<tagForm>>({
    tagName: [
        { message: '请输入标签名称', required: true, trigger: 'blur' },
        { max: 8, message: '标签名称不得超过8个字符', trigger: 'blur' },
    ],
    tagType: [{
        message: '请选择标签分类',
        required: true,
        trigger: 'change',
    }],
})

function remoteQueryProject(queryString) {
    const results = queryString
        ? projectList.value.filter((item) => {
            return item?.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
        })
        : projectList.value
    return results
    // call callback function to return suggestions
}

// 查询操作
function doSearch() {
    if (activeTab.value === '0') {
        gridOptions.pagerConfig.currentPage = 1
        gridOptions.pagerConfig.pageSize = 10
        gridOptions.pagerConfig.total = 0
    }
    else {
        labelGridOptions.pagerConfig.currentPage = 1
        labelGridOptions.pagerConfig.pageSize = 10
        labelGridOptions.pagerConfig.total = 0
    }
    getData()
}

async function getData(currentPage?: any, pageSize?: any) {
    if (currentPage && pageSize) {
        if (activeTab.value === '0') {
            gridOptions.pagerConfig.currentPage = currentPage
            gridOptions.pagerConfig.pageSize = pageSize
        }
        else {
            labelGridOptions.pagerConfig.currentPage = currentPage
            labelGridOptions.pagerConfig.pageSize = pageSize
        }
    }

    let tagType = ''
    if (form.tagType !== '') {
        if (form.tagType === 'all') { tagType = '' }
        else { tagType = form.tagType }
    }

    let tagId = ''
    if (form.tagId !== '') {
        if (form.tagId === 'all') { tagId = '' }
        else { tagId = form.tagId }
    }

    let tagState = ''
    if (form.state !== '') {
        if (form.state === 'all') { tagState = '' }
        else { tagState = form.state }
    }

    if (activeTab.value === '0') {
        gridOptions.loading = true
        const { code, msg, rows, total } = await getHouseTagList({
            pageNum: gridOptions.pagerConfig.currentPage,
            pageSize: gridOptions.pagerConfig.pageSize,
            projectName: form.projectName ? form.projectName : undefined,
            state: tagState === '' ? undefined : tagState,
            tagId: tagId === '' ? undefined : tagId,
            tagType: tagType === '' ? undefined : tagType,
            viewType: 0,
        })
        if (code === 200) {
            const data1 = rows || []
            gridOptions.loading = false
            gridOptions.pagerConfig.total = total
            gridOptions.data = []
            gridOptions.data = data1
            gridOptions.loading = false
        }
        else {
            gridOptions.loading = false
            ElMessage.error(msg)
        }
    }
    else {
        labelGridOptions.loading = true
        const { code, msg, rows, total } = await getHouseTagList({
            pageNum: labelGridOptions.pagerConfig.currentPage,
            pageSize: labelGridOptions.pagerConfig.pageSize,
            projectName: form.projectName ? form.projectName : undefined,
            state: tagState === '' ? undefined : tagState,
            tagId: tagId === '' ? undefined : tagId,
            tagType: tagType === '' ? undefined : tagType,
            viewType: 1,
        })
        if (code === 200) {
            const data2 = rows || []
            if (data2.length > 0) {
                data2.map((item) => {
                    if (item.projectName !== '' && item.projectName != null) {
                        if (item.projectName.length > 275) {
                            item.projectName = `${item.projectName.substr(0, 275)}...`
                        }
                    }
                    return item
                })
            }
            labelGridOptions.loading = false
            labelGridOptions.pagerConfig.total = total
            labelGridOptions.data = []
            labelGridOptions.data = data2
        }
        else {
            labelGridOptions.loading = false
            ElMessage.error(msg)
        }
    }
}

const soonTagOptions = ref([
    {
        label: '精确到月',
        value: 1,
    },
    {
        label: '精确到日',
        value: 2,
    },
])

const stateOptions = ref([
    {
        label: '全部',
        value: 'all',
    },
    {
        label: '启用',
        value: '1',
    },
    {
        label: '禁用',
        value: '0',
    },
])

function sortLabel() {
    router.push(`/label-management/house-tag/tag-sort`)
}

function addRow() {
    tagDialogTitle.value = '添加标签'
    isViewFlag.value = false
    dialogVisible.value = true
    resetRuleTagForm()
}

async function saveTag() {
    if (!ruleFormRef.value)
        return
    ruleFormRef.value.validate((valid, fields) => {
        if (valid) {
            const curentFormData = cloneDeep(ruleTagForm)
            if (ruleTagForm.tagType !== 6) {
                delete curentFormData.policyConfig
                delete curentFormData.policyArea
                delete curentFormData.policyAreaCode
                delete curentFormData.policyValue
            }
            else {
                let policyAreaFlag: boolean = true
                ruleTagForm.policyConfig?.forEach((policyItem) => {
                    if (!policyItem.policyAreaCode) {
                        policyAreaFlag = false
                    }
                    if (!policyItem.policyValue) {
                        policyAreaFlag = false
                    }
                })

                if (!policyAreaFlag) {
                    ElMessage.warning('区域配置信息需填写完整，包含区域和优惠数值')
                    return false
                }
            }

            if (ruleTagForm.id === '') {
                delete curentFormData.id
                addTag(curentFormData).then((res) => {
                    if (res.code === 200) {
                        dialogVisible.value = false
                        ElMessage.success(res.msg)
                    }
                    else {
                        ElMessage.error(res.msg)
                    }
                    doSearch()
                })
            }
            else {
                editTag(curentFormData).then((res) => {
                    if (res.code === 200) {
                        dialogVisible.value = false
                        ElMessage.success(res.msg)
                    }
                    else {
                        ElMessage.error(res.msg)
                    }
                    doSearch()
                })
            }
        }
        else {
            console.log('error submit!', fields)
        }
    })
}

async function doAction(item: any, row: any) {
    switch (item.value) {
        case 'add':
            showAdd.value = true
            showId.value = String(row.id)
            break
        case 'edit':
            if (activeTab.value === '0') {
                // await router.push(`/label-management/house-tag/tag-add?id=${row.projectId}`);
                isVewProjectTag.value = false
                projectId.value = row.projectId
                projectName.value = row.projectName
                projectTagForm.value.openTime = row.openTime
                await getProjectTag(row.projectId, 'edit')
            }
            else {
                ruleFormRef.value?.resetFields()
                tagDialogTitle.value = '编辑标签'
                isViewFlag.value = false
                getTagDetail({ tagId: row.tagId, tagType: row.tagType }).then((res) => {
                    dialogVisible.value = true // 编辑标签
                    const result = res.data
                    ruleTagForm.id = result.id
                    ruleTagForm.tagId = result.id
                    ruleTagForm.tagType = result.tagType
                    ruleTagForm.tagName = result.tagName
                    ruleTagForm.remark = result.remark
                    ruleTagForm.policyArea = result.policyArea || ''
                    ruleTagForm.policyAreaCode = result.policyAreaCode || ''
                    ruleTagForm.policyValue = result.policyValue || ''
                    if (!result.tagImgPath) {
                        ruleTagForm.tagImgPath = ''
                    }
                    else {
                        ruleTagForm.tagImgPath = result.tagImgPath
                    }
                    ruleTagForm.titleImages = result.titleImages ? result.titleImages : ''
                    if (ruleTagForm.tagType === 6) {
                        ruleTagForm.policyConfig = []
                        if (ruleTagForm.policyAreaCode || ruleTagForm.policyArea) {
                            const policyAreaCodeList = ruleTagForm.policyAreaCode.split(',')
                            const policyAreaList = ruleTagForm.policyArea.split(',')
                            const policyValueList = ruleTagForm.policyValue.split(',')
                            policyAreaCodeList.forEach((item, index) => {
                                const policyItem = {
                                    policyArea: policyAreaList[index],
                                    policyAreaCode: Number(policyAreaCodeList[index]),
                                    policyValue: policyValueList[index],
                                }
                                ruleTagForm.policyConfig?.push(policyItem)
                            })
                        }
                    }
                })
            }
            break
        case 'view':
            if (activeTab.value === '0') {
                projectTagForm.value.openTime = row.openTime
                await getProjectTag(row.projectId, 'view')
            }
            else {
                isViewFlag.value = true
                tagDialogTitle.value = '标签详情'
                // 获取标签详情
                getTagDetail({ tagId: row.tagId, tagType: row.tagType }).then((res) => {
                    dialogVisible.value = true // 编辑标签
                    const result = res.data
                    ruleTagForm.id = result.id
                    ruleTagForm.tagType = result.tagType
                    ruleTagForm.tagName = result.tagName
                    ruleTagForm.remark = result.remark
                    ruleTagForm.policyArea = result.policyArea || ''
                    ruleTagForm.policyAreaCode = result.policyAreaCode || ''
                    ruleTagForm.policyValue = result.policyValue || ''
                    if (!result.tagImgPath) {
                        ruleTagForm.tagImgPath = ''
                    }
                    else {
                        ruleTagForm.tagImgPath = result.tagImgPath
                    }
                    ruleTagForm.titleImages = result.titleImages ? result.titleImages : ''
                    if (ruleTagForm.tagType === 6) {
                        ruleTagForm.policyConfig = []
                        if (ruleTagForm.policyAreaCode || ruleTagForm.policyArea) {
                            const policyAreaCodeList = ruleTagForm.policyAreaCode.split(',')
                            const policyAreaList = ruleTagForm.policyArea.split(',')
                            const policyValueList = ruleTagForm.policyValue.split(',')
                            policyAreaCodeList.forEach((item, index) => {
                                const policyItem = {
                                    policyArea: policyAreaList[index],
                                    policyAreaCode: Number(policyAreaCodeList[index]),
                                    policyValue: policyValueList[index],
                                }
                                ruleTagForm.policyConfig?.push(policyItem)
                            })
                        }
                    }
                })
            }
            break
        case 'projectEdit':
            choseTag.value = cloneDeep(row)
            tagProjectTitle.value = `${choseTag.value.tagName}-${categoryData[choseTag.value.tagType]}`
            dialogProjectVisible.value = true // 展示标签编辑楼盘弹窗
            break
        case 'delete':
            if (activeTab.value === '1') {
                deleteTag({ tagId: String(row.tagId), tagType: row.tagType }).then((res) => {
                    if (res.code === 200) {
                        ElMessage.success('操作成功')
                        setTimeout(() => {
                            getData(1, 10)
                        }, 500)
                    }
                    else {
                        ElMessage.error(res.msg)
                    }
                })
                doSearch()
            }
            break
        default:
            break
    }
}

function switchTagState(val, tagId, tagType, projectNum) {
    if (tagId === null)
        return false
    if (val === 0) {
        ElMessageBox.confirm(
        `${projectNum === 0 ? '确认禁用该标签?' : '该标签已绑定楼盘，是否确认禁用'}`,
        '系统提示',
        {
            cancelButtonText: '取消',
            confirmButtonText: '确认',
            type: 'warning',
        },
        )
            .then(() => {
                loading.value = true
                editTag({ id: tagId, state: val, tagType }).then((res) => {
                    if (res.code === 200) {
                        ElMessage.success('标签选项已禁用')
                        loading.value = false
                        getTags()
                        doSearch()
                    }
                    else {
                        ElMessage.error(res.msg)
                        loading.value = false
                    }
                })
            })
            .catch(() => {
                doSearch()
                loading.value = false
            })
    }
    else {
        editTag({ id: tagId, state: val, tagType }).then((res) => {
            if (res.code === 200) {
                ElMessage.success('标签选项已启用')
                loading.value = false
                getTags()
                doSearch()
            }
            else {
                ElMessage.error(res.msg)
                loading.value = false
            }
        })
    }
}

const tagsOptions = ref([{ label: '全部', value: 'all' }])
type tagTypeItem = {
    tagId?: number | string
    tagName?: any[]
    tagType?: number | string
}
const tagTypeList = ref<tagTypeItem []> ([])
const initTagTypeList = ref([])
const tagSoonList = ref([])
const tagsAddOptions = ref([]) // 标签新增修改时标签分类
const tagsOptionsTwo = ref([{ label: '全部', value: 'all' }])
const checkedOtherIds = ref<string[]>([])
const initAllTags = ref([])

async function getProjectTag(projectId, type) {
    initAllTags.value = []
    checkedIdTags.value = []
    checkedTags.value = []
    tagTypeList.value.forEach((element) => {
        element.tagName.forEach((eleItem) => {
            initAllTags.value.push(eleItem)
        })
    })

    const result = await getListProjectTag({ projectId })
    if (result.code === 200) {
        dialogTagVisible.value = true // 展示楼盘编辑标签
        const choseTagList = result.data
        const projectTagList: tagTypeItem[] = []
        projectTagForm.value.soonTag = false
        /**
         const tagTypeThree = tagTypeList.value[3]?.tagName
        if (!tagTypeThree)
            return false
            */
        choseTagList.forEach((item) => {
            const tempIdArray = item.tagsId.split(',')
            const tempNameArray = item.tagsName.split(',')
            tempIdArray.forEach((it, index) => {
                const tempObject = { tagId: it, tagName: tempNameArray[index], tagType: item.tagType }
                if (item.tagType === 3) {
                    checkedOtherIds.value.push(it)
                    // tagTypeThree.push(tempObject)
                }
                checkedIdTags.value.push(tempObject.tagId)
                projectTagList.push(tempObject)
            })
            // 如果存在即将开盘标签
            if (item.tagType === 4) {
                projectTagForm.value.soonTag = true
                if (item.openTimeType !== 3) {
                    projectTagForm.value.openTimeType = item.openTimeType
                }
                openTimeTypeChange(item.openTimeType)
                projectTagForm.value.openTime = item.openTime
            }
        })
        projectTagForm2.value = cloneDeep(projectTagForm.value)
        checkedTags.value = projectTagList
        console.log(tagTypeList)
        if (type === 'view') {
            isVewProjectTag.value = true
        }
        else {
            isVewProjectTag.value = false
        }

        /* const uniqueArray = tagTypeThree.reduce((acc, current) => {
            const isExist = acc.some(item => item.tagId === current.tagId)
            if (!isExist)
                acc.push(current)
            return acc
        }, [])
        tagTypeList.value[3].tagName = tagTypeThree */
    }
}

function tagTypeChange(val) {
    const tagItem = tagsOptions.value.find((item) => {
        return item.value === val
    })
    if (tagItem) {
        if (val === 'all') {
            tagsOptionsTwo.value = [{ label: '全部', value: 'all' }]
        }
        else {
            tagsOptionsTwo.value = [{ label: '全部', value: 'all' }].concat(tagItem.children)
        }
    }
    else {
        tagsOptionsTwo.value = [{ label: '全部', value: 'all' }]
    }
    form.tagId = 'all'
    doSearch()
}

function tagIdChange(val) {
    form.tagId = val
    doSearch()
}

const tagIdRef = ref(null)
function tagIdVisibleChange() {
    if (form.tagType === 'all') {
        tagIdRef.value?.blur()
        ElMessage.warning('请先选择上一级标签')
        return false
    }
}

function getTags() {
    tagsOptions.value = [{ label: '全部', value: 'all' }]
    tagsAddOptions.value = []
    getListTag({}).then((res) => {
        const tempList = res.data
        initTagTypeList.value = tempList.filter((it) => {
            return ((it.tagType !== 4 || !it.tagTypeName.includes('即将开盘')) && it.tagType !== 3)
        })
        if (initTagTypeList.value.length > 0) {
            tagTypeList.value = cloneDeep(initTagTypeList.value)
        }
        tagSoonList.value = tempList.filter((it) => {
            return it.tagType === 4
        })
        // tagSoonList.value = []
        tempList.forEach((item) => {
            const it = { label: item.tagTypeName, value: item.tagType }
            if (item.tagType !== 4 && item.tagType !== 3) {
                tagsAddOptions.value.push(it)
            }
            if (item.tagName) {
                const optionsList = []
                item.tagName.forEach((tag) => {
                    optionsList.push({ label: tag.tagName, value: tag.tagId })
                })
                it.children = optionsList
            }
            if (item.tagType !== 3) {
                tagsOptions.value.push(it)
            }
        })
    })
}

const districtTypes = ref([])
function getDistrictList() {
    getAreasList().then((res) => {
    // "id": 18, "code": "25011300000", "name": "东湖新技术开发区"
        districtTypes.value = res.data[0].children
    })
}
const projectList = ref([])
onMounted(() => {
    getData()
    getTags()
    getDistrictList()
    getExcelModel()
    getHouseList({ pageNum: 1, pageSize: 500, projectName: '' }).then((res) => {
        const dataList = res.rows
        const temArray = []
        const projectArray = []
        dataList.forEach((item) => {
            temArray.push({ label: item.projectName, value: item.projectName })
            projectArray.push({ disabled: false, key: item.projectId, label: item.projectName })
        })
        projectList.value = temArray
        allProjectData.value = projectArray
    })
})
</script>

<template>
    <el-card v-loading.fullscreen.lock="loading"
             class="mb-20"
    >
        <el-form :inline="true"
                 :model="form"
                 label-width="100"
                 class="query_form"
        >
            <el-row>
                <el-col :span="6">
                    <el-form-item label="楼盘名称"
                                  prop="projectName"
                    >
                        <!---<el-select-v2 v-model="form.projectName"
                                      filterable
                                      :options="projectList"
                                      placeholder="请选择楼盘"
                                      remote
                                      :remote-method="remoteQueryProject"
                                      clearable
                                      @change="projectChange"
                        >
                            <template #default="{ item }">
                                <span style="margin-right: 8px">{{ item.label }}</span>
                            </template>
                        </el-select-v2> -->

                        <el-autocomplete v-model="form.projectName"
                                         :fetch-suggestions="remoteQueryProject"
                                         clearable
                                         class="inline-input w-50"
                                         placeholder="请输入或选择楼盘"
                                         @select="projectChange"
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="标签">
                        <el-row style="width:100% !important;">
                            <el-col :span="11">
                                <el-select v-model="form.tagType"
                                           class="m-2"
                                           placeholder="请选择一级标签"
                                           @change="tagTypeChange"
                                >
                                    <el-option v-for="item in tagsOptions"
                                               :key="item.value"
                                               :value="item.value"
                                               :label="item.label"
                                    />
                                </el-select>
                            </el-col>

                            <el-col v-if="form.tagType !== 4"
                                    :span="10"
                                    :offset="1"
                            >
                                <el-select ref="tagIdRef"
                                           v-model="form.tagId"
                                           class="m-2"
                                           placeholder="请选择二级标签"
                                           @change="tagIdChange"
                                           @visible-change="tagIdVisibleChange"
                                >
                                    <el-option v-for="item in tagsOptionsTwo"
                                               :key="item.value"
                                               :value="item.value"
                                               :label="item.label"
                                    />
                                </el-select>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="状态"
                                  prop="state"
                    >
                        <el-radio-group v-model="form.state"
                                        @change="switchState"
                        >
                            <el-radio v-for="item in stateOptions"
                                      :key="item.value"
                                      :label="item.value"
                            >
                                {{ item.label }}
                            </el-radio>
                        </el-radio-group>
                        <!-- <el-select v-model="form.state"
                                   placeholder="请选择状态"
                                   clearable
                        >
                            <el-option v-for="item in stateOptions"
                                       :key="item.value"
                                       :value="item.value"
                                       :label="item.label"
                            />
                        </el-select> -->
                    </el-form-item>
                </el-col>

                <el-col :span="4"
                        style="text-align: right;"
                >
                    <el-button type="primary"
                               @click="doSearch()"
                    >
                        搜索
                    </el-button>

                    <el-button @click="resetForm">
                        重置
                    </el-button>
                </el-col>
            </el-row>
        </el-form>
    </el-card>

    <el-card class="mb-20 relative">
        <el-row style="width:40%;margin-bottom:-50px;justify-content: end;z-index:10;
      position: absolute;right:20px;"
        >
            <!-- v-if="activeTab === '1'" -->
            <el-button type="primary"
                       class="mb-20"
                       @click="exportLabelInfo"
            >
                导出标签
            </el-button>

            <el-button type="primary"
                       class="mb-20"
                       @click="addRow"
            >
                + 新建
            </el-button>

            <el-button type="primary"
                       class="mb-20"
                       @click="sortLabel"
            >
                <i class="el-icon-sort" />标签排序
            </el-button>

            <el-button type="primary"
                       class="mb-20"
                       @click="importExcel"
            >
                批量导入楼盘
            </el-button>
        </el-row>

        <el-tabs v-model="activeTab"
                 class="demo-tabs"
                 @tab-click="handleTabClick"
        >
            <el-tab-pane label="楼盘维度"
                         name="0"
            />

            <el-tab-pane label="标签维度"
                         name="1"
            />
        </el-tabs>

        <template v-if="activeTab === '0'">
            <vxe-grid ref="xGrid"
                      v-bind="gridOptions"
                      v-on="gridEvents"
            >
                <template #buildingName="{ row }">
                    {{ row.projectName }}
                </template>

                <template #soonStatus="{ row }">
                    {{ row.soonTag === '即将开盘' ? `是` : '否' }}
                    {{ row.openTime ? `(${row.openTime})` : '' }}
                </template>

                <template #operate="{ row }">
                    <ButtonItem :btns="(row?.steward === '0' && row?.enterpriseLevelId === '2') ? [...btns, addBtn] : btns "
                                @btn-click="doAction($event, row)"
                    />
                </template>
            </vxe-grid>
        </template>

        <template v-if="activeTab === '1'">
            <vxe-grid ref="xGrid2"
                      v-bind="labelGridOptions"
                      v-on="gridLabelEvents"
            >
                <template #tagImgPath="{ row }">
                    <img v-if="row.tagImgPath"
                         :src="row.tagImgPath"
                         :alt="row.tagName"
                         style="border:0"
                    >
                </template>

                <template #tagType="{ row }">
                    {{ categoryData[row.tagType] }}
                </template>

                <template #linkProject="{ row }">
                    <span v-if="row.projectName !== ''">{{ row.projectName }}</span>
                </template>

                <template #tagState="{ row }">
                    <!-- <span v-if="row.state===0">禁用</span>
              <span v-if="row.state===1">启用</span> -->
                    <el-switch v-model="row.state"
                               :active-value="1"
                               :inactive-value="0"
                               @change="switchTagState($event, row.tagId, row.tagType, row.projectNum)"
                    />
                </template>

                <template #operate="{ row }">
                    <ButtonItem :btns="labelBtns "
                                @btn-click="doAction($event, row)"
                    />
                </template>
            </vxe-grid>
        </template>
    </el-card>

    <el-dialog ref="uploadFileDialog"
               v-model="dialogVisible"
               :title="tagDialogTitle"
               class="upload-file-dialog"
               width="50%"
               draggable
               @close="closeDialog"
    >
        <el-form ref="ruleFormRef"
                 :model="ruleTagForm"
                 :rules="rules"
                 label-width="120px"
                 :validate-on-rule-change="false"
        >
            <el-form-item label="选择标签分类"
                          prop="tagType"
            >
                <el-select-v2 v-model="ruleTagForm.tagType"
                              placeholder="请选择标签分类"
                              :disabled="isViewFlag"
                              :options="tagsAddOptions"
                              clearable
                              @change="switchTagType"
                />
            </el-form-item>

            <el-form-item label="标签名称"
                          prop="tagName"
            >
                <el-input v-model="ruleTagForm.tagName"
                          :disabled="isViewFlag"
                          placeholder="请输入标签名称"
                          maxlength="8"
                />
            </el-form-item>

            <el-row>
                <el-col v-if="ruleTagForm.tagType === 1 "
                        :span="12"
                >
                    <el-form-item label="卡片主题logo"
                                  prop="titleImages"
                    >
                        <!-- <UpdatedOss v-model="ruleTagForm.tagImgPath"
                            accept=".png,.jpg,.jpeg"
                    /> -->

                        <FlUpload v-if="dialogVisible"
                                  v-model="ruleTagForm.titleImages"
                                  accept=".png,.jpg,.jpeg"
                                  @start="uploadFileStart"
                                  @success="uploadThemeSuccess"
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="标签logo"
                                  prop="tagImgPath"
                    >
                        <!-- <UpdatedOss v-model="ruleTagForm.tagImgPath"
                            accept=".png,.jpg,.jpeg"
                /> -->

                        <FlUpload v-if="dialogVisible"
                                  v-model="ruleTagForm.tagImgPath"
                                  accept=".png,.jpg,.jpeg"
                                  @start="uploadFileStart"
                                  @success="uploadFileSuccess"
                        />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item v-if="ruleTagForm.tagType === 6"
                          label="区域配置"
                          prop="tagId"
            >
                <el-icon v-if="ruleTagForm.policyConfig?.length === 0"
                         @click="addPolicyItem()"
                >
                    <CirclePlusFilled />
                </el-icon>

                <template v-if="ruleTagForm.policyConfig?.length > 0">
                    <el-row v-for="(it, index) in ruleTagForm.policyConfig"
                            :key="index"
                            mb-8
                            w-full
                    >
                        <el-col :span="9">
                            <el-select v-model="ruleTagForm.policyConfig[index].policyAreaCode"
                                       placeholder="请选择区域"
                                       :disabled="isViewFlag"
                                       clearable
                                       @change="changeArea($event, index)"
                            >
                                <el-option v-for="item in districtTypes"
                                           :key="item.id"
                                           :label="item.name"
                                           :value="item.id"
                                />
                            </el-select>
                        </el-col>

                        <el-col :span="9"
                                :offset="1"
                        >
                            <!-- <el-select v-model="ruleTagForm.tagId" placeholder="请选择优惠数值">
                <el-option :label="item.label"  :value="item.value"  v-for="item in discountOptions"/>
              </el-select> -->
                            <el-input v-model="ruleTagForm.policyConfig[index].policyValue"
                                      :disabled="isViewFlag"
                                      placeholder="请输入优惠数值"
                                      clearable
                            />
                        </el-col>

                        <el-col v-if="!isViewFlag"
                                :span="4"
                                class="operate-icon"
                        >
                            <el-icon @click="addPolicyItem()">
                                <CirclePlusFilled />
                            </el-icon>

                            <el-icon @click="removePolicyItem(index)">
                                <RemoveFilled />
                            </el-icon>
                        </el-col>
                    </el-row>
                </template>
            </el-form-item>

            <el-form-item label="备注"
                          prop="remark"
            >
                <el-input v-model="ruleTagForm.remark"
                          :disabled="isViewFlag"
                          placeholder="请输入备注"
                          maxlength="20"
                          clearable
                />
            </el-form-item>
        </el-form>

        <template v-if="!isViewFlag"
                  #footer
        >
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>

                <el-button type="primary"
                           @click="saveTag"
                >
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>

    <el-dialog v-model="dialogTagVisible"
               :title="isVewProjectTag ? '楼盘标签详情' : '编辑(给楼盘打标签)'"
               width="68%"
               draggable
               @close="closeTagDialog"
    >
        <el-form ref="projectFormRef"
                 :model="projectTagForm"
                 label-width="120px"
                 style="max-height:68vh;overflow: auto;margin:0 -15px"
        >
            <div v-for="(it, index) in tagTypeList"
                 :key="index"
            >
                <el-form-item :label="it.tagTypeName">
                    <el-checkbox-group v-model="checkedIdTags"
                                       @change="handleCheckedTagsChange($event, it.tagType)"
                    >
                        <el-checkbox v-for="item in it.tagName"
                                     :key="item.tagId"
                                     :disabled="isVewProjectTag"
                                     :label="item.tagId"
                        >
                            {{ item.tagName }}
                        </el-checkbox>
                    </el-checkbox-group>

                    <el-button v-if="it.tagType === 3 && !isVewProjectTag"
                               type="primary"
                               icon="plus"
                               ml-20
                               @click="getOtherTags"
                    >
                        选择标签
                    </el-button>
                </el-form-item>
            </div>

            <template v-if="tagSoonList.length > 0">
                <el-form-item label="即将开盘"
                              prop="soonTag"
                >
                    <el-switch v-model="projectTagForm.soonTag"
                               :disabled="isVewProjectTag"
                               :active-value="true"
                               :inactive-value="false"
                    />
                </el-form-item>

                <el-form-item v-show="projectTagForm.soonTag"
                              label="开盘时间"
                              prop="openTime"
                >
                    <el-select v-model="projectTagForm.openTimeType"
                               placeholder="请选择开盘时间类型"
                               style="width:200px;margin-right:10px"
                               :disabled="isVewProjectTag"
                               @change="openTimeTypeChange"
                    >
                        <el-option v-for="item in soonTagOptions"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value"
                        />
                    </el-select>

                    <el-date-picker v-model="projectTagForm.openTime"
                                    :type="dateType"
                                    :format="formateType"
                                    :value-format="formateType"
                                    placeholder="选择开盘时间"
                                    :disabled="isVewProjectTag"
                    />
                </el-form-item>
            </template>
        </el-form>

        <template v-if="!isVewProjectTag"
                  #footer
        >
            <span class="dialog-footer">
                <el-button @click="dialogTagVisible = false">取消</el-button>

                <el-button type="primary"
                           @click="saveProject"
                >
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>

    <AddTagProject v-if="dialogProjectVisible"
                   :show="dialogProjectVisible"
                   :title="tagProjectTitle"
                   :row="choseTag"
                   @close="closeProjectTagDialog"
    />

    <el-dialog v-model="choseTagDialogVisible"
               title="选择标签"
               width="60%"
               draggable
               class="tag-dialog"
               @close="closeChoseTagDialog"
    >
        <el-form label-width="120px"
                 style="max-height:72vh;overflow: auto;margin:0 -15px"
        >
            <div v-for="(it, key) in otherTagTypeOptions"
                 :key="key"
            >
                <el-form-item :label="key">
                    <el-checkbox-group v-model="checkedOtherTags"
                                       @change="handleOtherTagsChange($event)"
                    >
                        <el-checkbox v-for="item in it"
                                     :key="item.id"
                                     :label="item"
                        >
                            {{ item.name }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </div>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="choseTagDialogVisible = false">取消</el-button>

                <el-button type="primary"
                           @click="addTagsProject"
                >
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>

    <el-dialog v-model="excelDialogVisible"
               title="导入标签"
               width="50%"
               draggable
               @close="closeExcelDialog"
    >
        <div>
            <el-link mb20
                     type="primary"
                     @click="downloadExcel('楼盘导入模板')"
            >
                批量导入模板下载
            </el-link>
        </div>

        <el-upload ref="upload"
                   class="upload-demo"
                   accept=".xls,.xlsx"
                   :http-request="handleHttpRequest"
                   :limit="1"
                   :on-exceed="handleExceed"
                   :auto-upload="false"
        >
            <template #trigger>
                <el-button type="primary">
                    选择文件
                </el-button>
            </template>

            <template #tip>
                <div class="el-upload__tip text-red">
                    只能上传xls,xlsx格式的Excel文件,且限制上传一个文件,新文件覆盖旧文件
                </div>
            </template>
        </el-upload>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeExcelDialog">取消</el-button>

                <el-button type="primary"
                           @click="submitUpload"
                >确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style lang="less" scoped>
.query_form {
    :deep(.el-form-item) {
        width: 100%;
    }
    :deep(.el-form-item__content) {
        width: 100%;
    }
    :deep(.el-radio) {
        margin-right: 12px;
    }
}

.el-transfer {
    :deep(.el-transfer-panel) {
        width: 220px;
    }
    :deep(.el-transfer-panel__body) {
        height: 360px;
    }
    :deep(.el-transfer-panel__header .el-checkbox .el-checkbox__label span) {
        color: #da0004;
        font-size: 13px;
        font-weight: bold;
    }
}

.operate-icon {
    display: flex;
    align-items: center;
    .el-icon {
        font-size: 24px;
        margin-left: 10px;
        cursor: pointer;
        color: #da0004;
    }
}

:deep(.el-button + .el-button) {
    margin-left: 4px !important;
}

:deep(.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after) {
    border-color: #da0004;
    border-width: 2px;
}
:deep(.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner) {
    border-color: #a5abb9;
}

:deep(.tag-dialog .el-form) {
    max-height: 80vh !important;
    overflow: auto !important;
}

.area-select :deep(.el-form-item__content) {
    width: 220px !important;
}

:deep(.el-tabs__content) {
    // overflow: auto !important;
}
:deep(.vxe-loading) {
    --vxe-loading-color: #da0004;
}
</style>
